<template>
  
  <div class="app-container">
    <el-row :gutter="10" class="mapBox" >
        {{voteName}}
        <!-- <span :title="voteName"></span> -->
    </el-row>
    <!-- <el-row :gutter="10" class="agree">
        <el-tag type="" style="margin-right:50px; font-size: 16px;" >{{agreeCount}}</el-tag>
        <el-tag type="danger" style="margin-right:200px; font-size: 16px;">{{notAgreeCount}}</el-tag>
    </el-row> -->
    <el-row v-if="isShowPrompt" :gutter="10">
       <el-alert
        :title="prompt"
        type="success">
      </el-alert>
    </el-row>
    <el-row v-if="userIsVoted" :gutter="10">
       <el-alert
        :title="votedPrompt"
        type="error">
      </el-alert>
    </el-row>


    <el-form ref="form" v-loading="loading" :model="form" label-position="left" :rules="rules" label-width="100px">
      <el-row class="onlinevote-list" :gutter="20" >
       <!-- :class="item.stypeColor == 'success'?'success':item.stypeColor == 'info'?'info':item.stypeColor == 'warning'?'warning':''" -->
        <!-- <el-col v-for="(item,index) in list" :key="item.id" :span="4" style="padding: 8px;" :class="'onlinevote-box '+item.stype" > -->
        <el-col v-for="(item,index) in list" :key="item.id" style="padding: 8px;" :span="4" :class="'onlinevote-box '+item.stype" >
          <el-card shadow="always" >
            <el-row style="font-size:16px;" class="o-name">
               <span> {{item.userName}}</span>
            </el-row>
            <el-row style="font-size:16px; float: right;">
               <el-tag type="danger" v-if="item.position!=null" style="text-align: right;">{{item.position}}</el-tag>
            </el-row>
            <el-row style="height:50px;display:block;width:100%;"></el-row>
            <el-form-item v-if="vote.isUnitSort"  label="单位排名" class="o-item">
              <span>{{item.unitSort}}</span>
            </el-form-item>
            <el-form-item v-if="vote.isQuote" label="评议组排名" class="o-item">
              <span v-if="item.subjectSort!=null">{{item.subjectSort}}</span>
              <span v-if="item.subjectSort==null">无</span>
            </el-form-item>

            <el-form-item label="申报类别" prop="applyType">
              <span>{{item.applyType}}</span>
            </el-form-item>
            <el-row  class="o-button">
              <el-button type="" @click="handleDetail(item.id)">查看申报材料</el-button>
            </el-row>
           
            <!-- :prop="'list.' + index +'.voteStatus'" -->
            <el-row class="o-button">
              <el-form-item :prop="item.propsVal">
                <el-input-number v-model="form[item.propsVal]" :min="1" :max="100" :precision="0" placeholder="分数" @change="voteStatusChange($event,item,index)" />
              </el-form-item>
            </el-row>
          </el-card>
        </el-col>
       
    </el-row>
    
  </el-form>  
   <div slot="footer"   class="dialog-footer o-footer">
        <el-button  v-if="!userIsVoted" type="primary" @click="checkAndComfirm">提 交</el-button>
        <el-button @click="toFather()">返 回</el-button>
      </div>
    <!-- 分页组件 -->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/> -->
    
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form  ref="formDetail" :model="formDetail"  label-width="240px">
        <el-form-item label="申报人" prop="userName">
          <el-input v-model="formDetail.userName" placeholder="" />
        </el-form-item>
        <el-form-item label="预申报等级" prop="position" >
          <!-- <el-input v-model="form.position" placeholder="预申报等级" /> -->
          <el-select disabled v-model="formDetail.position" placeholder="">
            <el-option key="中级" label="中级" value="中级"></el-option>
            <el-option key="副高" label="副高" value="副高"></el-option>
            <el-option key="正高" label="正高" value="正高"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申报类别" prop="applyType">
          <el-select disabled  v-model="formDetail.applyType">
            <el-option key="基础与应用基础研究" label="基础与应用基础研究" value="基础与应用基础研究"></el-option>
            <el-option key="应用技术研发" label="应用技术研发" value="应用技术研发"></el-option>
            <el-option key="信息软科学研究" label="信息软科学研究" value="信息软科学研究"></el-option>
            <el-option key="检验检测" label="检验检测" value="检验检测"></el-option>
            <el-option key="科研管理" label="科研管理" value="科研管理"></el-option>
            <el-option key="实验技术" label="实验技术" value="实验技术"></el-option>
            <el-option key="成果转化" label="成果转化" value="成果转化"></el-option>
            <el-option key="大田试验" label="大田试验" value="大田试验"></el-option>
            <el-option key="青年通道" label="青年通道" value="青年通道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预申报等级" prop="position" >
          <!-- <el-input v-model="form.position" placeholder="预申报等级" /> -->
          <el-select disabled v-model="formDetail.position" placeholder="">
            <el-option key="中级" label="中级" value="中级"></el-option>
            <el-option key="副高" label="副高" value="副高"></el-option>
            <el-option key="正高" label="正高" value="正高"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所在单位" prop="unitName">
          <el-input v-model="formDetail.unitName" placeholder="所在单位" />
        </el-form-item> -->
        <!-- <el-form-item label="附件" prop="fileUrl">
          <fileUpload v-model="formDetail.fileUrl" :limit="1"/>
        </el-form-item> -->
        <el-form-item v-if="formDetail.appraiseUrl!=null && formDetail.appraiseUrl!=''"  label="" prop="appraiseUrl">
          <el-link icon="el-icon-collection" :href="formDetail.appraiseUrl" target="_blank" type="primary">实干实绩评价表</el-link>
        </el-form-item>
        <el-form-item v-if="formDetail.recommendUrl!=null && formDetail.recommendUrl!=''" label="" prop="recommendUrl">
          <el-link icon="el-icon-collection" :href="formDetail.recommendUrl" target="_blank" type="primary">破格晋升职称推荐表</el-link>
        </el-form-item>
        <el-form-item v-if="formDetail.assessUrl!=null && formDetail.assessUrl!=''"  label="" prop="assessUrl">
          <el-link icon="el-icon-collection" :href="formDetail.assessUrl" target="_blank" type="primary">农业农村部职称评审表</el-link>
        </el-form-item>
        <el-form-item v-if="formDetail.evidenceUrl!=null && formDetail.evidenceUrl!=''"  label="" prop="evidenceUrl">
          <el-link icon="el-icon-collection" :href="formDetail.evidenceUrl" target="_blank" type="primary">职称评审相关证明材料</el-link>
        </el-form-item>
        <el-form-item  v-if="formDetail.infoUrl!=null && formDetail.infoUrl!=''" label="" prop="infoUrl">
          <el-link icon="el-icon-collection" :href="formDetail.infoUrl" target="_blank" type="primary">农业农村部职称申报人员信息表</el-link>
        </el-form-item>
        <!-- <el-form-item label="用户简介">
          <editor v-model="formDetail.content" :min-height="192"/>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer o-footer">
        <el-button @click="cancelDetail">关  闭</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="confirmVoteInfo" :visible.sync="showSelectVote" width="800px" append-to-body>
      <el-table v-loading="loading" :data="voteSelectList" :row-class-name="tableRowClassName">
        <el-table-column label="被投票姓名" align="center" prop="userName" />
        <el-table-column label="分数" align="center" prop="quantifiedScore" />
        
        <el-table-column label="被投票姓名" align="center" prop="userName2" />
        <el-table-column label="分数" align="center" prop="quantifiedScore2" />
      </el-table>
      <div slot="footer" class="dialog-footer o-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="!userIsVoted" type="primary" @click="submitForm">确认提交</el-button>
      </div>
    </el-dialog>

  </div>
  
</template>

<script>
import { NavbarVote} from '@/layout/components'
import {updateUserResult,getUserResultPage,getUserResult,getGroupName,getUserResultList,userIsVote} from "@/api/vote/voteonline";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import Editor from '@/components/Editor';
import FileUpload from "@/components/FileUpload";
import { throws } from 'assert';
export default {
  name: "VoteOnline",
  components: {
    Editor,
    FileUpload,
    NavbarVote
  },
  props: {
    vote: {
      type: Object, 
      default: null
    },
    backList:  {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 投票结果列表
      list: [],
      // 弹出层标题
      title: "",      
      // 提示信息
      prompt: '',
      // 是否100%可投同意
      isShowPrompt: true,
      // 已投过票提示信息
      votedPrompt: '',
      // 投票名称
      voteName: "",
      // 投票id
      // voteId: this.$route.query.voteId,
      voteId: null,
      // 投票规则信息
      // vote: {voteName:"",groupName:""},
      // 是否显示弹出层
      open: false,
      // 是否显示已选投票信息
      showSelectVote: false,
      // 弹出层标题
      confirmVoteInfo: '已选投票人信息预览',
      // 是否已投票
      userIsVoted: false,

      voteList:[],

      showVoteInfo: false,

      agreeCount: "同意: 0/10",
      notAgreeCount: "不同意: 0/10",


      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      groupNameList: [],
      // 表单参数
      form: {
        voteStatusList: []
      },
      quantifiedScoreList:[],
      // 已投列表信息
      voteSelectList: [],
      formDetail: {
      },
      // 表单校验
      rules: {
      },
      voteTypeDictDatas: getDictDatas(DICT_TYPE.VOTE_RULE_TYPE),
    };
  },
  created() {
    this.getVoteInfo();
    // this.getByUser();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },


    toFather(){

      if(!this.userIsVoted){
        this.$confirm('您尚未提交投票信息！, 是否确认返回?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.backList();
        }).catch(() => {
        });
      }else{
        // this.backList();
      }
      
    },


    /** 查询列表 */
    getList() {
      this.loading = true;						
      this.queryParams.voteId=this.voteId;
      // 处理查询参数
      let params = {...this.queryParams};
      // 执行查询
      getUserResultList(params).then(response => {
        this.list = response.data;
        this.form.voteStatusList=Array.from({ length:this.list.length }, (item,index) => ({id:this.list[index].id,voteStatus:null,userName:this.list[index].userName,quantifiedScore:0}))
        let idx = 0;
        for (let item of  this.list){
          const rule = [{ required: true, message: "请打分", type: "number", trigger: "blur" }]
          let key = 'value'+item.id;
          this.rules[key] = rule;
          item.propsVal = key;
          this.quantifiedScoreList[idx++]=null;
          this.$set(this.form, key, undefined);

        }
        this.setVoteStype();
		    this.loading = false		
        
        this.agreeCount = "同意: 0/"+this.list.length;
        this.notAgreeCount = "不同意: 0/"+this.list.length;

      });
    },

    /**
     * 
     * @param {获取投票信息} data 
     */
    getVoteInfo(){
      // this.vote = data;
      this.voteId = this.vote.id;
      this.form.voteId = this.voteId;
      this.voteName = this.vote.voteName;
      // this.vote.showApplyType=this.vote.voteName.
      this.getList();
      this.getGroup();
      this.isVote();
    },

    setVoteStype(){
      let stype = ["success","info","warning","default"];
      let group = "",offset = 0;
      for(let i=0;i<this.list.length;i++){

        if(group!=this.list[i].groupName){
          group = this.list[i].groupName;
          offset = (++offset)%4;
        }
        this.list[i].stype = stype[offset];

        // for (let item of  this.list){
        //   if(group!=item.groupName){
        //     group = item.groupName;
        //   }
        //   item.stype = stype[i%4];
        // }
      }
    },


    // getAgreeCount(){
    //   let agree =0,notAgree=0;
    //   for(let item of this.form.voteStatusList){
    //     if(item.voteStatus==1) agree++;
    //     if(item.voteStatus==2) notAgree++;
    //   }
    //   this.agreeCount = "同意: "+agree+"/"+this.list.length;
    //   this.notAgreeCount = "不同意: "+notAgree+"/"+this.list.length;
    // },

    voteScopeCheck(scope){
      if(scope>100)
        this.$modal.msgError("最高分不能超过100分！");
    },

    voteStatusChange(currVal,item,index){
        // console.log(currVal)
        // if(parseInt(currVal)>100){
        //   this.form[item.propsVal] = '';
        //   this.$modal.msgError("最高分不能超过100分！");
        //   return ;
        // }
        // if(parseInt(currVal)<1){
        //   this.form[item.propsVal] = '';
        //   this.$modal.msgError("最低分不能小于1分！");
        //   return ;
        // }
        this.form.voteStatusList[index].voteStatus=0;
        this.form.voteStatusList[index].id=item.id;
        this.form.voteStatusList[index].userName=item.userName;
        this.form.voteStatusList[index].groupName=item.groupName;
        this.form.voteStatusList[index].quantifiedScore=currVal;
        this.form.voteStatusList[index].userNo = item.mobile;
        // item.propsVal=currVal;
        // this.form[item.propsVal]
        // let stype = ["success","info","warning","default"];
        // item.stype="default"
        // this.$set(this.list, index, item);
      item.stype="default"
      this.$set(this.list, index, item);
      // this.getAgreeCount();
    },

    getGroup(){
      let params = {voteId:this.voteId}
      // getGroupName(params).then(response =>{
      //     this.groupNameList = response.data;
          // this.voteName = this.vote.voteName+"-"+this.groupNameList[0].groupName;
          // let rate = this.groupNameList[0].excellentMaxCountRate*100;
          // if(rate>=100){
          //   this.isShowPrompt = false;
          // }
          // if(this.groupNameList.length==1){
          //   this.prompt = "按"+rate+"%投同意票,当前组投同意票不能操过"+this.groupNameList[0].excellentMaxCount+"人";
          // }else{
          //   this.prompt = "按"+rate+"%投同意票";
          // }
      // })
    },
    /** 取消按钮 */
    cancel() {
      // this.$parent.closeVoteOnline();
      // this.$parent.getList();
      // this.open = false;
      this.showSelectVote = false;
    },
    /** 取消按钮 */
    cancelDetail() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.formDetail = {
        userName: null,
        unitName: null,
        fileUrl: null,
        content: null
      };
    },
    /** 查看详情操作 */
    handleDetail(id) {
					 
      getUserResult(id).then(response => {
        this.formDetail = response.data;
        this.open = true;
        this.title = "用户详情";
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
   
    checkAndComfirm(){
      this.voteSelectList=[];
      this.$refs["form"].validate(valid => {
        if (!valid) {
          // this.$modal.msgError("您有尚未选择的投票信息！");
          this.$alert('您有尚未选择的投票信息！', '提示', {confirmButtonText: '确定'});
          return;
        }


        for(let i=0;i<this.form.voteStatusList.length;i=i+2){
          if(this.form.voteStatusList[i]== undefined){
            break;
          }
          let data = {};
          data = this.form.voteStatusList[i];
          if(this.form.voteStatusList[i+1]!= undefined){
            data.userName2 = this.form.voteStatusList[i+1].userName;
            data.voteStatus2 = this.form.voteStatusList[i+1].voteStatus;
            data.quantifiedScore2=this.form.voteStatusList[i+1].quantifiedScore;
          }
          this.voteSelectList.push(data);
        }
        
        this.showSelectVote=true;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          this.$modal.msgError("您有尚未选择的投票信息！");
          
          return;
        }
        let updateResult = {
          voteStatusList: this.form.voteStatusList,
          voteId: this.voteId,
          voteMode:this.vote.voteMode
        }

        this.showSelectVote = false;

        updateUserResult(updateResult).then(response => {
          this.$modal.msgSuccess("投票成功");
          this.open = false;
          this.userIsVoted = true;
          this.votedPrompt = '您已投票成功';
        });




        // this.$modal.message('是否确认提交','投票提交提示', {
        //   dangerouslyUseHTMLString: true
        // }).then(()=>{
        //   let updateResult = {
        //     voteStatusList: this.form.voteStatusList,
        //     voteId: this.voteId
        //   }
        //   updateUserResult(updateResult).then(response => {
        //     this.$modal.msgSuccess("投票成功");
        //     this.open = false;
        //   });
        // })
      });
    },
    isVote(){
      let params = {"voteId":this.voteId}
      userIsVote(params).then(reps=>{
        if(reps.data){
           this.$modal.msgSuccess("您已投过票！");
           this.userIsVoted = true;
           this.votedPrompt = '您已投票成功';
        }
      })
    },
    
  }
};
</script>
<style lang="scss" scoped>

.reject{
  background-color: #f56c6c !important;
  color: #fff;
}
.waiver{
  background-color: #909399  !important;
  color: #fff;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.mapBox{
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  padding: 10px 0;
}
.agree{
  text-align: right;
  font-size: 30px;
  margin-bottom: 20px;
}
.onlinevote-list{
  display: flex;
  flex-wrap: wrap;
  ::v-deep .el-form-item__content{
    margin-left: inherit !important;
  }
  .onlinevote-box{
    // width: 20% !important;
    // success ,info,warning,default
    .is-error{
      position: relative;
      ::v-deep .el-form-item__error{
        width: 100px;
        padding: 10px;
        background-color: #FFF;
        position: absolute;
        top:-50px;
        left: 50%;
        font-size: 20px;
        // margin-left: -55px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        &:after {
          content: " ";
          border-width: 6px;
          bottom: -6px;
          margin-left: -6px;
          border-top-color: #fff !important;
          border-bottom-width: 0;
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-top-color: transparent;
          border-style: solid;
        }
      }
    }
    .el-radio-button:nth-child(2){
      &.is-active{
       ::v-deep .el-radio-button__inner{
          background-color: #f56c6c !important;
          border-color: #f56c6c !important;
          box-shadow: -1px 0 0 0 #f56c6c !important;
        }
      }
    }
    .el-radio-button:nth-child(3){
      &.is-active{
       ::v-deep .el-radio-button__inner{
          background-color: #909399 !important;
          border-color: #909399 !important;
          box-shadow: -1px 0 0 0 #909399 !important;
        }
      }
    }
    &.default{
      .o-name{
        background-image: url('../../../assets/images/tag_bg3.png');
      }
    }
    &.success{
      .o-name{
        background-image: url('../../../assets/images/tag_bg4.png');
      }
      .o-item-zu{
        span{
          border:1px solid #41d281;
          background-color: #41d281;
        }
      }
      .o-link{
        color: #41d281;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #41d281 !important;
          border-color: #41d281 !important;
          box-shadow: -1px 0 0 0 #41d281;
        }
      }
    }
    &.info{
      .o-name{
        background-image: url('../../../assets/images/tag_bg5.png');
      }
      .o-item-zu{
        span{
          border:1px solid #54b89b;
          background-color: #54b89b;
        }
      }
      .o-link{
        color: #54b89b;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #54b89b !important;
          border-color: #54b89b !important;
          box-shadow: -1px 0 0 0 #54b89b;
        }
      }
    }
    &.warning{
      .o-name{
        background-image: url('../../../assets/images/tag_bg6.png');
      }
      .o-item-zu{
        span{
          border:1px solid #c7984f;
          background-color: #c7984f;
        }
      }
      .o-link{
        color: #c7984f;
      }
      .is-active{
        ::v-deep .el-radio-button__inner{
          background-color: #c7984f !important;
          border-color: #c7984f !important;
          box-shadow: -1px 0 0 0 #c7984f;
        }
      }
    }
    position: relative;
    .o-item,.o-item-zu{
      margin-bottom: 0;
    }
    .o-item-zu{
      span{
        border:1px solid #1890ff;
        background-color: #1890ff;
        color: #FFF;
        border-radius: 5px;
        height: 20px;
        line-height: 16px;
        display: inline-block;
        padding: 0 10px;
      }
    }
    .o-name{
      position: absolute;
      top:9px;
      left: -1px;
      // margin: -4px 0 0 -70px;
      width: 160px;
      height: 50px;
     
      // background-color: #FFF;
      // background-image: url('../../../assets/images/tag_bg3.png');
      background-size: cover;
      background-position: bottom center;
      // border-radius: 5px;
      // border: 1px solid #e6ebf5;
      margin-bottom: 20px;
      color: #FFF;
      padding-top: 8px;
      span{
        display: inline-block;
        padding-left: 30px;
        font-size: 18px;
        font-weight: 700;
      }
      span.zu{
        font-size: 12px;
        color: #FFFF00;
        font-weight: normal;
      }
    }
    .o-button{
      text-align: center;
      margin-top: 20px;
    }
  }
}
.o-footer{
  display: block;
  width: 100%;
  padding: 30px 0;
  text-align: center;
}
</style>